<template>
	<div class="edit-popup">
		<popup ref="popupRef" :title="popupTitle" :async="true" width="1350px" :clickModalClose="true"
			@confirm="handleSubmit" @close="handleClose">
			<div class="bor">
				<el-form ref="formRef" :model="formData" label-width="130px" :rules="formRules" label-position="right">
					<el-row>
						<el-col :span="span">
							<el-form-item label="入库仓库" prop="warehouse_id">
								<el-select class="flex-1" v-model="formData.warehouse_id" placeholder="请选择入库仓库"
									size="small">
									<el-option v-for="(item, index) in options.listColumn" :key="index"
										:label="item.title" :value="item.id"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="span">
							<el-form-item label="货单单号" prop="delivery_no">
								<el-input v-model="formData.delivery_no" :disabled="formData.root == 1"
									placeholder="请输入货单单号" size="small">
								</el-input>
							</el-form-item>
						</el-col>
						<el-col :span="span">
							<el-form-item label="货单编号">
								<el-input v-model="formData.delivery_number" :disabled="formData.root == 1"
									placeholder="请输入货单编号" size="small">
								</el-input>
							</el-form-item>
						</el-col>
						<el-col :span="span">
							<el-form-item label="货单日期">
								<div class="span">
									<el-date-picker v-model="formData.delivery_date" format="YYYY/MM/DD"
										value-format="YYYY-MM-DD" type="date" placeholder="请输入货单日期" size="small" />
								</div>

							</el-form-item>
						</el-col>
						<el-col :span="span">
							<el-form-item label="送货单位">
								<el-input v-model="formData.delivery_unit" :disabled="formData.root == 1"
									placeholder="请输入送货单位" size="small">
								</el-input>
							</el-form-item>
						</el-col>
						<el-col :span="span">
							<el-form-item label="送货车牌号" prop="delivery_plate_number">
								<el-input v-model="formData.delivery_plate_number" :disabled="formData.root == 1"
									placeholder="请输入送货车牌号" size="small"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="span">
							<el-form-item label="送货人联系方式" prop="delivery_tel">
								<el-input v-model="formData.delivery_tel" @blur="ondelivery_tel(formData.delivery_tel)"
									:disabled="formData.root == 1" placeholder="请输入送货人联系方式" size="small">
								</el-input>
							</el-form-item>
						</el-col>
						<el-col :span="span">

						</el-col>
					</el-row>
					<el-row>
						<el-col :span="24" style="border-right:none ;">
							<el-form-item label="照片">
								<div>
									<div class="flex">
										<material-picker v-model="formData.delivery_image" :limit="99" />
										<div class="font-t">建议尺寸：100*100px，支持jpg，jpeg，png格式</div>
									</div>
								</div>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="24" style="border-right:none ;">
							<el-form-item label="备注" prop="remark">
								<el-input v-model="formData.remark" :disabled="formData.root == 1" type="textarea"
									placeholder="请输入备注" autosize size="small"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</div>
			<div>
				<mtable :tableName="true" :disableds="popupTitle" @onShowtables="onShowtables"
					:type_name="formData.type_name"></mtable>
			</div>
		</popup>
	</div>

</template>
<script lang="ts" setup>
	import type {
		FormInstance
	} from 'element-plus'
	import Popup from '@/components/popup/index.vue'
	import {
		roleLists
	} from '@/api/perms/role'
	import mtable from '../components/tableone.vue'
	import {
		adminAdd,
		adminEdit
	} from '@/api/inventory/list'
	import {
		deptLists
	} from '@/api/org/department'
	import {
		jobsLists
	} from '@/api/org/post'
	import feedback from '@/utils/feedback'
	import {
		adminlistColumn
	} from '@/api/warehouse/list'
	import useAppStore from '@/stores/modules/inventory'
	const userStore = useAppStore()
	const tableList = computed(() => userStore.tableList)
	const emit = defineEmits(['success', 'close'])
	const span = ref(6)
	const formRef = shallowRef < FormInstance > ()
	const popupRef = shallowRef < InstanceType < typeof Popup >> ()
	const mode = ref('add')
	const popupTitle = computed(() => {
		userStore.onpopupTitle('10')
		if (mode.value == 'edit') {
			return '编辑入库单'
		} else {
			return '新增入库单'
		}
	})


	const formData = reactive({
		warehouse_id: '',
		delivery_unit: '',
		delivery_tel: '',
		delivery_plate_number: '',
		delivery_no: '',
		delivery_image: [],
		delivery_number: '',
		delivery_date: '',
		remark: '',
		type: 10,
		type_name: '',
		items: '',
		root: ''
	})
	const ondelivery_tel = (val: any) => {
		let reg = /^1[345789]\d{9}$/
		if (reg.test(val) == false) {
			return feedback.msgError(`请输入正确手机号`)
		}
	}
	const formRules = reactive({
		warehouse_id: [{
			required: true,
			message: '请选择入库仓库',
			trigger: ['change']
		}],
		delivery_unit: [{
			required: true,
			message: '请输入送货单位',
			trigger: ['blur']
		}]
	})
	const options = reactive({
		role: [] as any[],
		dept: [] as any[],
		jobs: [] as any[],
		listColumn: [] as any[],
	})

	const getOptions = () => {
		adminlistColumn({
			page_type: 0
		}).then((data: any) => {
			options.listColumn = data
		})
		roleLists({
			page_type: 0
		}).then((data: any) => {
			options.role = data.lists
		})
		deptLists({
			page_type: 0
		}).then((data: any) => {
			options.dept = data
		})
		jobsLists({
			page_type: 0
		}).then((data: any) => {
			options.jobs = data.lists
		})
	}
	const onShowtables = () => {
		// formRef.value?.validate()
	}

	const handleSubmit = async () => {
		if (formData.warehouse_id) {

		} else {
			feedback.msgError(`请先填写入库仓库`)
		}
		await formRef.value?.validate()
		let arry = tableList.value
		const a = arry.map(item => {
			if (item.unit_name) {
				return true
			} else {
				return false
			}
		})
		let b = a.includes(true)
		if (!b) {
			feedback.msgError(`请选择商品`)
		} else {
			for (var i = arry.length - 1; i >= 0; i--) {
				if (arry[i].title == '') {
					arry.splice(i, 1)
				}
			}
			const c = arry.filter(item => {
				return item.quantity == 0
			}).map(item => {
				feedback.msgError(`${item.title}数量不能为0`)
				return true
			})
			if (!c[0]) {
				formData.items = JSON.stringify(arry)
				const a = JSON.parse(formData.items).length
				if (a != 0) {
					mode.value == 'edit' ? await adminEdit(formData) : await adminAdd(formData)
					popupRef.value?.close()
					emit('success')
				}
			}
		}
	}

	const open = (type = 'add') => {
		mode.value = type
		popupRef.value?.open()
	}

	const setFormData = (data: Record < any, any > ) => {
		for (const key in formData) {
			if (data[key] != null && data[key] != undefined) {
				//@ts-ignore
				formData[key] = data[key]
			}
		}
	}

	const handleClose = () => {
		emit('close')
	}

	getOptions()

	defineExpose({
		open,
		setFormData
	})
</script>
<style lang="scss" scoped>
	$bor-color:#eeeff0;

	.el-col {
		border-right: 1px solid $bor-color;
		border-top: 1px solid $bor-color;
		align-items: center;
		padding: 2px;

		&:nth-child(4n) {
			border-right: 0;
		}
	}

	.el-form-item {
		margin-bottom: 0;
	}

	::v-deep .el-form-item__label {
		border-left: 0;
		border-top: 0;
		border-bottom: 0;
		margin-right: 10px;
	}

	.bor {
		border-bottom: 1px solid $bor-color;
		border-left: 1px solid $bor-color;
		border-right: 1px solid $bor-color;

		.bor-title {
			width: 100%;
			height: 40px;
			padding: 10px;
			background-color: #F8F8F8;
		}
	}

	::v-deep .el-form-item__error {
		z-index: 10;
	}

	::v-deep .span {
		.el-input__inner {
			width: 124px;
		}

		.el-input__suffix-inner {
			display: none;
		}
	}

	::v-deep .el-form-item__error {
		top: 80%;
	}
</style>
